import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'


// import BlinkApp from './Blink'
import PizzaTranslator from './PizzaTranslator'

export default class Main extends Component{
  render() {
    return (
      <View>
        <Text>Main的页面Main的页面Main的页面Main的页面Main的页面Main的页面Main的页面Main的页面Main的页面Main的页面Main的页面Main的页面Main的页面</Text>
        <Text>第一个react native项目，模仿网易云音乐第一个react native项目，模仿网易云音乐第一个react native项目，模仿网易云音乐第一个react native项目，模仿网易云音乐第一个react native项目，模仿网易云音乐第一个react native项目，模仿网易云音乐第一个react native项目，模仿网易云音乐没反应呀没反应</Text>
        {/* <BlinkApp /> */}
        <Text style={{fontWeight: 'bold'}}>
          I am bold
          <Text style={{color: 'red'}}>
            and red
          </Text>
        </Text>
        {/* // 试试去掉父View中的`flex: 1`。
        // 则父View不再具有尺寸，因此子组件也无法再撑开。
        // 然后再用`height: 300`来代替父View的`flex: 1`试试看？ */}
        {/* flexDirection的默认值是column而不是row，而flex也只能指定一个数字值 */}
        <View style={{height: 100, flexDirection: 'row'}}>
          <View style={{flex: 1, backgroundColor: 'powderblue'}}><Text>第一个盒子</Text></View>
          <View style={{flex: 2, backgroundColor: 'skyblue'}} ><Text>第二个盒子</Text></View>
          <View style={{flex: 3, backgroundColor: 'steelblue'}} ><Text>第三个盒子</Text></View>
        </View>
        {/* // 尝试把`justifyContent`改为`center`看看
        // 尝试把`flexDirection`改为`row`看看 */}
        <View style={{flexDirection: 'row',justifyContent:'space-between',}}>
          <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        </View>
        <PizzaTranslator />
      </View>
    )
  }
}

// class MainScreen extends React.Component {
//   static navigationOptions = {
//     title: 'Welcome',
//   };
//   render() {
//     const { navigate } = this.props.navigation;
//     return (
//       <Button
//         title="Go to Jane's profile"
//         onPress={() =>
//           navigate('Profile', { name: 'Jane' })
//         }
//       />
//     )
//   }
// }
// export default MainScreen
